<%@page import="model.bean.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String uName = (String) request.getSession().getAttribute("uName");
	String role = (String) request.getSession().getAttribute("role");	
	if((uName == null) || !("admin".equals(role) || !"user".endsWith(role))) {
		response.sendRedirect("login.jsp");
	}
%> 
<%
	String time = (String) request.getAttribute("time");
	String success = (String) request.getAttribute("sua");
	Calendar c = (Calendar) request.getAttribute("calendar");
	if (c == null) {
		c = new Calendar();
	}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>ĐỒ ÁN TỐT NGHIỆP</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<%@ include file="jsheader.jsp"%>
<link href="mycss/popup.css" rel="stylesheet" type="text/css" />
</head>
<body class="skin-blue">

	<!-- header logo: style can be found in header.less -->
	<%@ include file="header.jsp"%>

	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<%@ include file="menu.jsp"%>

		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side"> <!-- Content Header (Page header) -->
		<section class="content-header">
		<h1>Quản lý lịch công tác</h1>
		<ol class="breadcrumb">
			<li><a href="index.jsp"><i class="fa fa-dashboard"></i> Trang chủ</a></li>
			<li><a href="quanly_lich.jsp">Quản lý lịch</a></li>
			<li class="active">Cập nhật</li>
		</ol>
		</section> <!-- Main content --> <section class="content">
		<div class="col-md-6">

			<%
				if ("true".equals(success)) {
			%>
			<div class="alert alert-success alert-dismissable">
				<button type="button" class="close" data-dismiss="alert"
					aria-hidden="true">×</button>
				<b>Thông báo: </b> Cập nhật thông tin thành công !
			</div>
			<%
				}
				if ("false".equalsIgnoreCase(success)) {
			%>
			<div class="alert alert-danger alert-dismissable">
				<button type="button" class="close" data-dismiss="alert"
					aria-hidden="true">×</button>
				<b>Lỗi kết nối: </b> Trùng lịch xin kiểm tra lại !
			</div>
			<%
				}
			%>			
		</div>
		<div class="row">
			<!-- left column -->
			<div class="col-md-12">
				<!-- general form elements -->
				<div class="box box-primary">
					<div class="box-header">
						<h3 class="box-title">Nhập vào lịch công tác</h3>
					</div>
					<!-- /.box-header -->
					<!-- form start -->
					<form action="SuaLichServlet" name="mform" method="post">
						<div class="box-body">
							<div class="form-group">
								<div class="form-group" style="width: 600px">
									<input type="hidden" id="idCalendar2" name="idCalendar2" value="<%=c.getIdcalendar()%>"/>
									<label>Thời gian:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-clock-o"></i>
										</div>
										<input type="text" class="form-control pull-right"
											id="reservationtime" placeholder="Click chọn thời gian"
											name="datetime" value="<%=time%>"/>
									</div>
									<!-- /.input group -->
									<label>Mức độ:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-arrow-circle-down"></i>
										</div>
										<select class="form-control" name="status">
										<% if("1".equals(c.getStatus())) {%>											
											<option value="0">Bình thường</option>
											<option value="1" selected="selected">Quan trọng</option>
										<% } %>
										<% if("0".equals(c.getStatus())) {%>											
											<option value="0" selected="selected">Bình thường</option>
											<option value="1">Quan trọng</option>
										<% } %>
										</select>
									</div>
								</div>
								<div class="form-group" style="width: 800px">
									<label>Tiêu đề:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-info"></i>
										</div>
										<input class="form-control" type="text" value="<%=c.getTitle() %>"
										name="title" id="title">
									</div>
									<label>Nội dung:</label>
									<div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-info"></i>
										</div> 
									<input class="form-control"
										type="text"
										name="content" id="content" value="<%=c.getContent()%>">
										</div>
										 <label>Địa điểm:</label> 
										 <div class="input-group">
										<div class="input-group-addon">
											<i class="fa fa-info"></i>
										</div>
										 <input class="form-control" type="text"
										 name="location2" id="location" value="<%=c.getLocation()%>">
										</div>
									<!-- /.form group -->
								</div>
							</div>
							</div>
							<!-- Element to pop up -->
						<div id="element_to_pop_up2">
							<a class="button b-close">X</a>
							<h4>Bạn chưa nhập dữ đầy đủ liệu!</h4>
							<a href="#" onclick="popupclose2()"><span
								class="button small pop1">OK</span></a>
						</div>
						<!-- Element to pop up -->
						<div id="element_to_pop_up">
							<a class="button b-close">X</a>
							<h4>Bạn có chắc muốn cập nhập thông tin không?</h4>
							<a href="#" onclick="sua()"><span class="button small pop1">Đồng
									ý</span></a> <a href="#" onclick="popupclose()"><span
								class="button small pop1">Hủy</span></a>
						</div>
					</form>
					<div class="box-footer">
						<button class="btn btn-success" onclick="popup2()">Cập
							nhật</button>
						<a href="CalendarServlet?back" class="btn btn-primary">Bỏ
							qua</a>
					</div>
				</div>
				<!-- /.box -->

				<!-- Form Element sizes -->

			</div>
			<!--/.col (left) -->
		</div>
		<!-- /.row --> </section><!-- /.content --> </aside>
		<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->
	<!-- jQuery 2.0.2 -->
	<script src="js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<!-- InputMask -->
	<script src="js/plugins/input-mask/jquery.inputmask.js"
		type="text/javascript"></script>
	<script src="js/plugins/input-mask/jquery.inputmask.date.extensions.js"
		type="text/javascript"></script>
	<script src="js/plugins/input-mask/jquery.inputmask.extensions.js"
		type="text/javascript"></script>
	<!-- date-range-picker -->
	<script src="js/plugins/daterangepicker/daterangepicker.js"
		type="text/javascript"></script>
	<!-- bootstrap color picker -->
	<script src="js/plugins/colorpicker/bootstrap-colorpicker.min.js"
		type="text/javascript"></script>
	<!-- bootstrap time picker -->
	<script src="js/plugins/timepicker/bootstrap-timepicker.min.js"
		type="text/javascript"></script>
	<!-- AdminLTE App -->
	<script src="js/AdminLTE/app.js" type="text/javascript"></script>
	<!-- AdminLTE for demo purposes -->
	<script src="js/AdminLTE/demo.js" type="text/javascript"></script>
	<script src="myjs/bpopup.min.js"></script>
	<!-- Page script -->
	<script type="text/javascript">
		$(function() {
			//Datemask dd/mm/yyyy
			$("#datemask").inputmask("dd/mm/yyyy", {
				"placeholder" : "dd/mm/yyyy"
			});
			//Datemask2 mm/dd/yyyy
			$("#datemask2").inputmask("mm/dd/yyyy", {
				"placeholder" : "mm/dd/yyyy"
			});
			//Money Euro
			$("[data-mask]").inputmask();

			//Date range picker
			$('#reservation').daterangepicker();
			//Date range picker with time picker
			$('#reservationtime').daterangepicker(
					{
						timePicker : true,
						timePickerIncrement : 15,
						timePicker12Hour : false,

						format : 'YYYY-MM-DD HH:mm A',
						ranges : {
							'Hôm nay' : [ moment(), moment() ],
							'Tuần này' : [ moment().weekday(1),
									moment().weekday(5) ],
							'Tuần kế tiếp' : [ moment().weekday(8),
									moment().weekday(12) ]
						},
						//showDropdowns : true,
						separator : ' / ',
						locale : {

							applyLabel : 'Ok',
							cancelLabel : 'Hủy',
							fromLabel : 'Từ',
							toLabel : 'Đến',
							customRangeLabel : 'Chọn thời gian',

						},
					});
			//Date range as a button
			$('#daterange-btn').daterangepicker(
					{
						ranges : {
							timePicker : true,
							timePickerIncrement : 15,
							'Today' : [ moment(), moment() ],
							'Yesterday' : [ moment().subtract('days', 1),
									moment().subtract('days', 1) ],
							'Last 7 Days' : [ moment().subtract('days', 6),
									moment() ],
							'Last 30 Days' : [ moment().subtract('days', 29),
									moment() ],
							'This Month' : [ moment().startOf('month'),
									moment().endOf('month') ],
							'Last Month' : [
									moment().subtract('month', 1).startOf(
											'month'),
									moment().subtract('month', 1)
											.endOf('month') ]
						},
						startDate : moment().subtract('days', 29),
						endDate : moment()
					},
					function(start, end) {
						$('#reportrange span').html(
								start.format('YYYY MMM, D') + ' - '
										+ end.format('MMMM D, YYYY'));
					});

			//iCheck for checkbox and radio inputs
			$('input[type="checkbox"].minimal, input[type="radio"].minimal')
					.iCheck({
						checkboxClass : 'icheckbox_minimal',
						radioClass : 'iradio_minimal'
					});
			//Red color scheme for iCheck
			$(
					'input[type="checkbox"].minimal-red, input[type="radio"].minimal-red')
					.iCheck({
						checkboxClass : 'icheckbox_minimal-red',
						radioClass : 'iradio_minimal-red'
					});
			//Flat red color scheme for iCheck
			$('input[type="checkbox"].flat-red, input[type="radio"].flat-red')
					.iCheck({
						checkboxClass : 'icheckbox_flat-red',
						radioClass : 'iradio_flat-red'
					});

			//Colorpicker
			$(".my-colorpicker1").colorpicker();
			//color picker with addon
			$(".my-colorpicker2").colorpicker();

			//Timepicker
			$(".timepicker").timepicker({
				showInputs : false
			});
		});
		
		function popup2() {
			var location = document.getElementById("location").value;
			var content = document.getElementById("content").value;
			var time = document.getElementById("reservationtime").value;
			var title = document.getElementById("title").value;
			if(title == "" || time == "" || content == "" || location == "") {
				$('#element_to_pop_up2').bPopup({
					speed : 650,
					transition : 'slideIn',
					transitionClose : 'slideBack'
				});			
			} else {
				$('#element_to_pop_up').bPopup({
					speed : 650,
					transition : 'slideIn',
					transitionClose : 'slideBack'
				});	
				
			}
			
		}

		function sua() {
			document.forms["mform"].submit();
		}

		function popupclose() {
			$('#element_to_pop_up').bPopup().close();
		}
		function popupclose2() {
			$('#element_to_pop_up2').bPopup().close();
		}
	</script>
</body>
</html>